<template>
  <div class="test-smart-medical-rag">
    <h1>智慧医疗RAG系统 - 测试页面</h1>
    
    <div class="test-section">
      <h2>基本功能测试</h2>
      
      <div class="button-test">
        <h3>按钮点击测试</h3>
        <el-button type="primary" @click="testButtonClick">
          测试按钮点击
        </el-button>
        <p v-if="buttonClicked">✅ 按钮点击成功！</p>
      </div>
      
      <div class="input-test">
        <h3>文本输入测试</h3>
        <el-input 
          v-model="testText" 
          placeholder="请输入测试文本"
          @input="handleTextInput"
        />
        <p>输入的内容: {{ testText }}</p>
        <p v-if="textInputHandled">✅ 文本输入处理成功！</p>
      </div>
      
      <div class="triage-test">
        <h3>分诊请求测试</h3>
        <el-input
          v-model="patientComplaint"
          type="textarea"
          :rows="3"
          placeholder="请输入患者主诉症状"
        />
        <el-button 
          type="primary" 
          @click="submitTriageRequest"
          :loading="isProcessing"
          style="margin-top: 10px;"
        >
          提交分诊请求
        </el-button>
        <div v-if="triageResult" class="result-display">
          <h4>分诊结果:</h4>
          <el-card>
            <p><strong>建议科室:</strong> {{ triageResult.department }}</p>
            <p><strong>优先级:</strong> {{ triageResult.priority }}</p>
            <p><strong>建议:</strong> {{ triageResult.suggestion }}</p>
          </el-card>
        </div>
      </div>
      
      <div class="error-test">
        <h3>错误处理测试</h3>
        <el-button type="danger" @click="testError">
          测试错误处理
        </el-button>
      </div>
    </div>
    
    <div class="console-output">
      <h3>控制台输出</h3>
      <div class="console-content">
        <div v-for="(log, index) in consoleLogs" :key="index" class="log-item">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-type" :class="log.type">{{ log.type.toUpperCase() }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { MedicalRAGService, type TriageRequest } from '../services/medicalRAGService'

const buttonClicked = ref(false)
const testText = ref('')
const textInputHandled = ref(false)
const patientComplaint = ref('')
const isProcessing = ref(false)
const triageResult = ref<any>(null)

const consoleLogs = ref<Array<{
  time: string
  type: 'info' | 'error' | 'success' | 'warning'
  message: string
}>>([])



const addLog = (type: 'info' | 'error' | 'success' | 'warning', message: string) => {
  consoleLogs.value.unshift({
    time: new Date().toLocaleTimeString(),
    type,
    message
  })
  if (consoleLogs.value.length > 20) {
    consoleLogs.value = consoleLogs.value.slice(0, 20)
  }
}

const testButtonClick = () => {
  buttonClicked.value = true
  addLog('success', '按钮点击测试成功')
  ElMessage.success('按钮点击测试成功！')
}

const handleTextInput = () => {
  textInputHandled.value = true
  addLog('info', `文本输入: ${testText.value}`)
}

const submitTriageRequest = async () => {
  if (!patientComplaint.value.trim()) {
    ElMessage.warning('请输入患者主诉症状')
    addLog('warning', '未输入患者主诉症状')
    return
  }
  
  isProcessing.value = true
  addLog('info', '开始提交分诊请求...')
  
  try {
    const requestData: TriageRequest = {
      chiefComplaint: '测试患者主诉',
      symptoms: '测试症状描述',
      vitalSigns: {
        systolic: 120,
        diastolic: 80,
        heartRate: 75,
        temperature: 36.5
      },
      medicalHistory: '测试病史'
    }
    
    const result = await MedicalRAGService.submitTriageRequest(requestData)
    triageResult.value = result
    addLog('success', '分诊请求成功')
    ElMessage.success('分诊分析完成！')
  } catch (error) {
    addLog('error', `分诊请求失败: ${error}`)
    ElMessage.error('分诊请求失败，请重试')
  } finally {
    isProcessing.value = false
  }
}

const testError = () => {
  addLog('error', '这是一个测试错误')
  ElMessage.error('这是一个测试错误消息')
}

// 页面加载时添加日志
addLog('info', '测试页面加载完成')
</script>

<style scoped>
.test-smart-medical-rag {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  /* 添加缩放相关样式 */
  transition: transform 0.1s ease-out;
  transform-origin: top left;
  /* 防止页面内容溢出 */
  overflow-x: auto;
  overflow-y: auto;
}

.test-section {
  margin-bottom: 30px;
}

.button-test, .input-test, .triage-test, .error-test {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.console-output {
  margin-top: 30px;
}

.console-content {
  background: #1e1e1e;
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
}

.log-item {
  margin-bottom: 5px;
  display: flex;
  gap: 10px;
}

.log-time {
  color: #888;
  min-width: 80px;
}

.log-type {
  min-width: 60px;
  text-align: center;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
}

.log-type.info {
  background: #409eff;
}

.log-type.error {
  background: #f56c6c;
}

.log-type.success {
  background: #67c23a;
}

.log-type.warning {
  background: #e6a23c;
}

.result-display {
  margin-top: 15px;
}

.result-display h4 {
  margin-bottom: 10px;
}
</style> 